import { loginApi } from '@/services'
import { getUserInfoAsync } from '@/store/userSlice'
import { useAppDispatch } from '@/utils/tools/store'
import { appLocalStorage, Message, Image, Checkbox, } from 'magic-ui-react'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import styles from './styles.module.less'
const Login = () => {

  const navigate = useNavigate()
  const dispatch = useAppDispatch();

  const [formData, setFormData] = useState({
    username: '',
    password: ''
  })

  const loginFn = async () => {
    try {
      const res = await loginApi(formData);
      if (res.success) {
        appLocalStorage.setValue('token', res.data.token)
        Message.success('登录成功！')
        dispatch(getUserInfoAsync())
        navigate('/')
      }
    } catch (error) {
      Message.warning('登录失败请从新登录！')
    }
  }

  return (
    <main className={styles.login}>
      <img className={styles.loginBg} src="appImages/bg/loginBg.jpg" alt="loginBg" />
      <div className={`${styles.content}`}>
        <Image width={70} height={70} src="logo/one/android-chrome-192x192.png" />
        <h1 className="text-xl">登录</h1>
        <div className={`${styles.input} w-80`}>
          <input
            name='magicNewTabAdminuUsername'
            type="text"
            placeholder='用户名'
            value={formData.username}
            onChange={(e) => {
              setFormData({
                ...formData,
                username: e.target.value
              })
            }}
          />
          <input
            name='magicNewTabAdminuPassword'
            type="password"
            placeholder='密码'
            value={formData.password}
            onChange={(e) => {
              setFormData({
                ...formData,
                password: e.target.value
              })
            }}
          />
        </div>
        <button onClick={loginFn} className={styles.loginBtn}>登录</button>
      </div>
    </main>
  )
}

export default Login